/*
    Document   : main
    Created on : 31-lug-2013, 10.09.23
    Author     : Mattia
    Description: Foglio di stile generico
*/

/*
    TODO customize this sample style
    Syntax recommendation http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
*/

#container{
    height: 968px!important;
    overflow: hidden!important;
}

.content_boxes {
    background-color: white;
/*    height: 968px!important;
    overflow: hidden;*/
    width: $width-tablet;
    
        .box_course{
            margin: 0 0 10px 10px;
            width: 315px;
            height: 315px;
            overflow: hidden;
            margin: 0 0px 11px 11px;
            position: relative; 
            background-image: url("/libs/css/assets/caricamento.gif");
            background-position: center;
            background-repeat: no-repeat;
            float: left;
        }
        @media #{$large}{
           width: $width-desktop;
                .box_course{
                    margin: 0 0 10px 10px;
                }
        }
        @media #{$xlarge}{
           width: $width-wide;
                .box_course{
                    margin: 0 0 11px 11px;
                }
        }
    margin:$marginCenter;
}

.box_course{
        &.open_initial{
           .link_category{
               width:0px;
               display:none; 
                   img{
                       width:0px;
                   }
                   span{
                       display:none;
                   }
           }
           .anteprima_course{
               width:315px;
               display:block;
           }
        }   
}

.link_category{
	width:315px;
	height:315px;
	display:block;
	z-index: 2;
	margin:0 auto;
	padding-top:62px;		
		img{
			height:104px;
			display:block;
			margin:0 auto;		
		}
		span{
			display:block;
			font-size:37px;
			color:white;
			text-transform:uppercase;
			text-align:center;
			margin-top:13px;
			width:100%;
			position:absolute;
            overflow:hidden;
		}
}

.anteprima_course {
	position: relative;
	color: black;
	display: none;
	/* width:315px; */
	width: 0px;
	height: 315px;
	margin: 0 auto;
	/* overflow:hidden; */
	background-color: white;
	font-weight: bold;
		h3{
			font-family: $font-nexa-heavy; ;
            font-size: 1.2em;
			margin: 0;
			text-transform: uppercase;		
            padding: 15px 0 0;
            /*font-weight: bold;*/
		}
		h4{
			margin:0px;
			padding: 0 0 5px;
            font-family : $font-nexa-light ;
			font-size: 1.2em;
		}
}

.consigliato_redazione{
	display:block;
	position:absolute;
	background-image: url("/libs/css/assets/consigliato_bg.png");
	padding:5px 15px;
	text-align:center;
	width:284px;
	color:white;
	font-size:17px; 
		&.off{
			display:none;
		}
}

.img_box_course{
	display:block;
	height:160px;
}

.cont_data_course {
	width: 315px;
	margin: 0 auto;
	padding-right: 5px;
}

.course_view, .user_course{
    float: left;
}

.num_view{
	margin:7px 0px 0px;
	padding:0px;
	font-size:0.9em;
    font-family: $font-nexa-heavy;
}

.course_price, .heart_course{
    float: right;
}

.course_price {
	margin-top: 0px;
	font-size: 3.6em;
    font-family: $font-nexa-light;
	line-height: 45px;
	height: 48px;
		span{
			float: left;
			display: block;
		}
}

.user_course {
	margin-top: 16px;
	width: 260px;
}

.mini_utente{
	display: block;
	float: left;
	width: 35px;
    height: 35px;
}

.dati_mini_utente {
	float: left;
	padding-top: 0;
    padding-left: 0.5em;
	width: 206px;
}

.user_tit_1{
	display: block;
	font-size: 1em;
    font-family: $font-nexa_black ;
}

.user_tit_2 {
    color: #9A9A9A;
    display: block;
    font-size: 1.0em;
    line-height: 13px;
}

.heart_course{
	width:18px;
	height: 16px;
	overflow: hidden;
    background-image: url("/libs/css/assets/course_heart.png");
/*  background-image: url("../../libs/css/assets/heart.png");
    width: 29px;
    height: 25px;   */
	background-repeat: no-repeat;
	display: block;
	margin-top: 30px;
		&:hover{
			/*background-position: center bottom;*/
            background-position: 0 -16px;
		}
}

.lingue{
    background-color: #b056b0;
}

.scrittura{
    background-color: #cf0723;
}

.tecnologia{
    background-color: #00b6b8;
}

.storia{
    background-color: #aad23b;
}

.fotografia{
    background-color: #007cc2;
}

.cucina{
    background-color: #ecd815;
}

.arte{
    background-color: #fd961d;
}

.cinema{
    background-color: #2272cb;
}

.architettura{
    background-color: #897a53;
}

.musica{
    background-color: #ff4323;
}

.fumetto{
    background-color: #aad23b;
}

.corriere{
    background-color: #676767;
}

.allCategories{
    background-color: #181818;
}

.economia{
    background-color: #dddddd;
}

.salute{
    background-color: #ff8d1d;
}

#page_nav{
    visibility: hidden;
}